import React from 'react'
import { useNavigate, useLocation } from 'umi'
import './style.scss'
import { TabBar } from 'antd-mobile'
import Icon from '@c/Icon'

export default function index() {
  const navigate = useNavigate()
  const location = useLocation()


  const tabs = [
    {
      key: '/home',
      title:
        (active: Boolean) => {
          return <span style={{ color: active ? '#fc5a5a' : '#333' }}>首页</span>
        },
      icon: (active: boolean) => {
        return <Icon name='&#xe6cb;' size={22} color={active ? '#fc5a5a' : '#333'} />
      }

    },
    {
      key: '/search',
      title:   (active: Boolean) => {
        return <span style={{ color: active ? '#fc5a5a' : '#333' }}>搜索</span>
      },
      icon:  (active: boolean) => {
        return <Icon name='&#xe724;' size={22} color={active ? '#fc5a5a' : '#333'} />
      }
    },
    {
      key: '/cart',
      title:   (active: Boolean) => {
        return <span style={{ color: active ? '#fc5a5a' : '#333' }}>购物车</span>
      },
      icon: (active: boolean) => {return <Icon name = '&#xe73d;' size={22} color={active ? '#fc5a5a' : '#333'}/>}
    },
    {
      key: '/user',
      title: (active: Boolean) => {
        return <span style={{ color: active ? '#fc5a5a' : '#333' }}>我的酒仙</span>

      },
      icon: (active: boolean) => {
        return (<Icon name='&#xe8a0;' size={22} color={active ? '#fc5a5a' : '#333'} />)
      },
    },
  ]

  return (
    <div className='details-content'>

      <TabBar
        onChange={
          (key) => {
            navigate(key)
          }
        }
        activeKey={useLocation().pathname}
      >
        {tabs.map(item => (
          <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
        ))}


      </TabBar>

    </div>
  )
}
